<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <!-- v-cloak 解决 文本内容 初次加载 内容闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <!-- v-text 指令 将 v-text 的所指定的 属性的值 设置到 p 标签的 内容中 -->
        <p v-text="msg"></p>



        <p>{{ msg2 }}</p>
        <!-- v-text 不能解析 文本内容的 HTML 标签 -->
        <p v-text="msg2"></p>
        <!-- v-html 可以解析 文本内容的 HTML 标签 -->
        <p v-html="msg2"></p>

        <!-- 
            插值： 表示
            将 vue 对象里面的 data属性值 设置到 HTML 的内容里面
        -->

        <!-- 值设置 属性占位部分的内容 -->
        <p>================== {{ msg }} ===============</p>
        <!-- v-text 会覆盖掉 标签中原有的内容 -->
        <p v-text="msg">-------------------++++++++++++++++++++++++</p>
        <!--  v-text 指定的 内容 后面 拼接字符串 -->
        <p v-text="msg + '123456'"></p>

        <!-- v-text v-html 之中可以写 JavaScript 表达式 -->
        <p v-text="flage ? msg : msg2"></p>

    </div>
    <script src="./lib/vue.min-2.6.11.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '学习到了知识就马上去实践，这不是一件很快乐的事情吗？',
                msg2: '<h3> 这是 h3 标签</h3>',
                flage: false
            }
        })
    </script>
    
</body>
</html>